<template>
  <div class="dept-manage">
    <div class="query-form"  v-if="userInfo.userId==1000001">
      <el-form :inline="true" ref="queryForm" :model="queryForm">
        <el-form-item label="申请人">
          <el-input
              placeholder="请输入申请人名称"
              v-model="queryForm.applyUserName">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="getLeaveQueryList" type="primary">查询</el-button>
          <el-button @click="handleReset('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handleAdd">创建</el-button>
      </div>
      <el-table :data="leaveList">
        <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template #default="scope" v-if="userInfo.userId===1000001?false:true">
            <el-button v-if="scope.row.applyState==1" size="mini" @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button v-if="scope.row.applyState==2" type="danger" size="mini">已拒绝
            </el-button>
            <el-button v-if="scope.row.applyState==3" type="primary" size="mini">已同意
            </el-button>
            <el-button
                type="danger"
                size="mini"
                @click="handleDel(scope.row._id)"
            >撤销
            </el-button
            >
          </template>
          <template #default="scope" v-if="userInfo.userId===1000001?true:false">
            <el-button size="mini" type="primary" @click="handleAgree(scope.row)">同意
            </el-button>
            <el-button
                type="danger"
                size="mini"
                @click="handleRefuse(scope.row)"
            >拒绝
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="pager.total"
          :page-size="pager.pageSize"
          @current-change="handleCurrentChange"
      />
    </div>
<!--    新增审批-->
    <el-dialog title="请假新增" v-model="showModal">
      <el-form
          ref="dialogForm"
          :model="leaveForm"
          label-width="100px"
          :rules="rules">
        <el-form-item label="请假人" prop="applyUser">
          <el-input v-model="userInfo.userName" disabled="true"/>
        </el-form-item>
        <el-form-item label="请假类型" prop="applyType">
          <el-select v-model="leaveForm.applyType" placeholder="请选择请假类型">
            <el-option :value="1" label="事假"></el-option>
            <el-option :value="2" label="调休"></el-option>
            <el-option :value="3" label="年假"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请假开始时间" prop="startTime">
          <el-input v-model="leaveForm.startTime" placeholder="请输入开始时间，格式为2000-01-01"/>
        </el-form-item>
        <el-form-item label="请假结束时间" prop="endTime">
          <el-input v-model="leaveForm.endTime" placeholder="请输入结束时间，格式为2000-01-01"/>
        </el-form-item>
        <el-form-item label="请假时长" prop="leaveTime">
          <el-input v-model="leaveForm.leaveTime" placeholder="请输入请假时长"/>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input
              type="textarea"
              :rows="2"
              v-model="leaveForm.reason"
              placeholder="请输入原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>


<!--    编辑审批-->
    <el-dialog title="请假新增" v-model="showModal1">
      <el-form
          ref="dialogForm"
          :model="curForm"
          label-width="100px"
          :rules="rules">
        <el-form-item label="请假人" prop="applyUser">
          <el-input v-model="userInfo.userName" disabled="true"/>
        </el-form-item>
        <el-form-item label="请假类型" prop="applyType">
          <el-select v-model="curForm.applyType" placeholder="请选择请假类型">
            <el-option :value="1" label="事假"></el-option>
            <el-option :value="2" label="调休"></el-option>
            <el-option :value="3" label="年假"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请假开始时间" prop="startTime">
          <el-input v-model="curForm.startTime" placeholder="请输入开始时间"/>
        </el-form-item>
        <el-form-item label="请假结束时间" prop="endTime">
          <el-input v-model="curForm.endTime" placeholder="请输入结束时间"/>
        </el-form-item>
        <el-form-item label="请假时长" prop="leaveTime">
          <el-input v-model="curForm.leaveTime" placeholder="请输入请假时长"/>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input
              type="textarea"
              :rows="2"
              v-model="curForm.reason"
              placeholder="请输入原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmitEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import utils from '../utils/utils';

export default {
  name: "leave",
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      queryForm: {
        curAuditUserName: "",
      },
      columns: [
        {
          label: "审批编号",
          prop: "orderNo",
        },
        {
          label: "类型",
          prop: "applyType",
          formatter(row, column, value) {
            return {
              1: "事假",
              2: "调休",
              3: "年假"
            }[value];
          }
        },
        {
          label: "开始时间",
          prop: "startTime",
          formatter(row, column, value) {
            return utils.formateDate(new Date(value));
          },
        },
        {
          label: "结束时间",
          prop: "endTime",
          formatter(row, column, value) {
            return utils.formateDate(new Date(value));
          },
        },
        {
          label:"休假时长",
          prop: "leaveTime"
        },
        {
          label: "休假原因",
          prop: "reason"
        },
        {
          label: "审批人",
          prop: "powerUserName"
        },
        {
          label: "状态",
          prop: "applyState",
          formatter(row, column, value) {
            return {
              1: "待审批",
              2: "审批拒绝",
              3: "审批通过",
            }[value];
          }
        },
        {
          label: "创建时间",
          prop: "createTime",
          formatter(row, column, value) {
            return utils.formateDate(new Date(value));
          },
        },
      ],
      applyUser: [],
      leaveForm:{},
      curForm:{},
      leaveList:[],
      pager: {
        total:0,
        pageNum: 1,
        pageSize: 10,
      },
      action: "create",
      showModal: false,
      showModal1:false,
      deptForm: {
        parentId: [null],
      },
      rules: {
        applyUser: [
          {
            required: true,
            message: "请输入申请人",
            trigger: "blur",
          },
        ],
        applyType: [
          {
            required: true,
            message: "请输入请假类型",
            trigger: "blur",
          },
        ],
        startTime: [
          {
            required: true,
            message: "请输入开始时间",
            trigger: "blur",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请输入结束时间",
            trigger: "blur",
          },
        ],
        leaveTime: [
          {
            required: true,
            message: "请输入时长",
            trigger: "blur",
          },
        ],
        reason: [
          {
            required: true,
            message: "请输入原因",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getLeaveList();
  },
  methods: {
    // 申请列表初始化
    async getLeaveList() {
      let params={};
      if(this.userInfo.userId==1000001){
        //当登陆用户为管理员，则加载全部请假申请列表
        params.action="getAll";
        let list=await this.$api.getLeavesList(params)
        this.leaveList=list;
      }else{
        params.userId=this.userInfo.userId;
        params.action="getUserList";
        let list=await this.$api.getLeavesList(params)
        this.leaveList=list;
      }

    },
    getLeaveQueryList(){
      let params={};
      params.applyUserName=this.queryForm.applyUserName;
      this.$api.getLeaveQueryList(params).then((res)=>{
        this.leaveList=res;
      });
    },
    handleCurrentChange(current) {
      this.pager.pageNum = current;
      this.getLeaveList();
    },
    // 表单重置
    handleReset(form) {
      this.$refs[form].resetFields();
      this.getLeaveList();
      this.queryForm.applyUserName="";
    },
    //表单取消
    handleClose(){
      this.showModal = false;
      this.showModal1 = false;
    },
    //提交新增请假审批
    async handleSubmit(){
      let orderNo=Math.floor(Math.random() * 89999999 + 10000000);
      let params={}
      params.orderNo=orderNo;
      params.applyType=this.leaveForm.applyType;
      params.startTime=this.leaveForm.startTime;
      params.endTime=this.leaveForm.endTime;
      params.applyUserName=this.userInfo.userName;
      params.applyUserId=this.userInfo.userId;
      params.powerUserName="lin";
      params.powerUserId=1000001;
      params.leaveTime=this.leaveForm.leaveTime;
      params.reason=this.leaveForm.reason;
      params.applyState=1;
      params.createTime=Date.now();
      params.action="create";
      await this.$api.addLeaves(params)
      this.showModal = false;
      this.getLeaveList();
    },
    //提交编辑后的审批
    async handleSubmitEdit(){
      console.log(this.curForm)
      let params={}
      params.leaveTime=this.curForm.leaveTime;
      params.reason=this.curForm.reason;
      params.applyType=this.curForm.applyType;
      params.startTime=this.curForm.startTime;
      params.endTime=this.curForm.endTime;
      params.action="update";
      params._id=this.curForm._id;
      params.applyState=1;
      await this.$api.addLeaves(params);
      this.getLeaveList();
      this.showModal1 = false;
    },
    //编辑单挑审批
    handleEdit(row){
      this.curForm=row;
      this.showModal1=true
    },
    //撤销单挑审批
    async handleDel(_id){
      let params={};
      params._id=_id;
      params.action="del";
      await this.$api.addLeaves(params)
      this.getLeaveList();
    },
    // 角色添加
    handleAdd() {
      this.action = "create";
      this.showModal = true;
    },
    async handleAgree(row){
      let params={}
      params._id=row._id;
      params.action="agree";
      await this.$api.addLeaves(params)
      this.getLeaveList();
    },
    async handleRefuse(row){
      let params={}
      params._id=row._id;
      params.action="refuse";
      await this.$api.addLeaves(params)
      this.getLeaveList();
    }
  }
}
</script>

<style scoped>

</style>
